<template>
  <div class="order-detail">
    <!-- 顶部导航栏 -->
    <div class="posflex">
      <van-nav-bar title="订单详情" left-arrow left-text="返回" @click-left="$router.go(-1)">x</van-nav-bar>
    </div>

    <div style>
      <div class="view">
        <span style="color:#fff">订单已取消</span>
        <img style="height:67px;width:99px" src="https://file.sdyxmall.com/h5/v1/public/app/img/cancel.ff91da7.png" alt />
      </div>
      <div class="flex aic bg-fff pl-15" style="height:40px;"></div>
    </div>

    <div class="orderGoods bg-fff">
      <van-card :num="5" :price="1888" title="山东】烟台丑苹果 12枚装（75mm+/枚）"
        thumb="https://mall.s.maizuo.com/0181314b3c641fa9f9e2e4999389b879.png" style="font-size: 15px">
      </van-card>
      <van-card :num="5" :price="1888" title="山东】烟台丑苹果 12枚装（75mm+/枚）"
        thumb="https://mall.s.maizuo.com/0181314b3c641fa9f9e2e4999389b879.png" style="font-size: 15px">
      </van-card>
    </div>

    <van-cell-group class="mt-10">
      <van-cell title="商品金额" value="18888"></van-cell>
      <van-cell title="运费" value="11"></van-cell>
      <van-cell title="实付" value="2000"></van-cell>
    </van-cell-group>

    <div style="padding: 12px 15px ;color: #797d82;font-size: 11px;background:white">
      <div style="display:flex;justify-content:space-between">
        <div style="line-height:22px">
          <span style="margin-right:10px">订单编号</span>
          <span>646d7c0dd78dbb670d3e5246</span>
        </div>
        <div>
          <van-button type="default" size="mini">复制</van-button>
        </div>
      </div>

      <div>
        <span style="margin-right:10px">下单时间</span>
        <span>2023-05-24 02:53:01</span>
      </div>
    </div>

    <div class="fixl flex bg-fff mt-10 aic jc-sb pt-10 pb-10">
      <!-- <div class="pl-10">订单状态: 待支付</div> -->
      <div class="flex pl-1">
        <span class="mr-5 ml-15">剩余支付时间:</span>
        <time-box class="f999">13分58秒</time-box>
      </div>
      <div style="padding-right:15px">
        <!-- <van-button style="font-size:15px" type="default" size="small">重新购买</van-button>
        <van-button style="font-size:15px" type="default" size="small">取消订单</van-button> -->
        <van-button style="font-size:15px" type="default" size="small">去支付</van-button>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'name'

}
</script>

<style scoped lang="less">
@import './detail.less';
</style>